/**
 * 底板详情页面JavaScript
 */

$(document).ready(function() {
    let currentRegionId = null;
    let isEditMode = false;

    // 渲染底板预览和区域
    renderTemplatePreview();

    // 创建/编辑区域表单提交
    $('#regionForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            name: $('#regionName').val().trim(),
            x: parseInt($('#regionX').val()),
            y: parseInt($('#regionY').val()),
            width: parseInt($('#regionWidth').val()),
            height: parseInt($('#regionHeight').val())
        };

        // 验证数据
        if (!formData.name) {
            APP_UTILS.showError('请输入区域名称');
            return;
        }

        if (isNaN(formData.x) || formData.x < 0) {
            APP_UTILS.showError('请输入有效的X坐标');
            return;
        }

        if (isNaN(formData.y) || formData.y < 0) {
            APP_UTILS.showError('请输入有效的Y坐标');
            return;
        }

        if (!formData.width || formData.width <= 0) {
            APP_UTILS.showError('请输入有效的宽度');
            return;
        }

        if (!formData.height || formData.height <= 0) {
            APP_UTILS.showError('请输入有效的高度');
            return;
        }

        // 检查区域是否超出底板范围
        if (formData.x + formData.width > templateData.width) {
            APP_UTILS.showError('区域超出底板宽度范围');
            return;
        }

        if (formData.y + formData.height > templateData.height) {
            APP_UTILS.showError('区域超出底板高度范围');
            return;
        }

        const url = isEditMode 
            ? `/regions/${currentRegionId}/edit`
            : `/templates/${templateData.id}/regions/create`;

        APP_UTILS.showLoading(isEditMode ? '保存中...' : '创建中...');

        APP_AJAX.post(url, formData)
            .then(response => {
                APP_UTILS.hideLoading();
                if (response.success) {
                    APP_UTILS.showSuccess(isEditMode ? '区域更新成功' : '区域创建成功');
                    $('#regionModal').modal('hide');
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    APP_UTILS.showError(response.error || '操作失败');
                }
            })
            .catch(error => {
                APP_UTILS.hideLoading();
                APP_UTILS.showError(error.error || '操作失败');
            });
    });

    // 编辑区域按钮
    $('.edit-region').on('click', function(e) {
        e.preventDefault();
        const regionId = $(this).data('region-id');
        
        // 从表格行中获取区域数据
        const row = $(this).closest('tr');
        const regionName = row.find('td:first strong').text().trim();
        
        // 解析位置和尺寸
        const positionText = row.find('td:nth-child(2) small').text();
        const sizeText = row.find('td:nth-child(3) small').text();
        
        const positionMatch = positionText.match(/X:\s*(\d+),\s*Y:\s*(\d+)/);
        const sizeMatch = sizeText.match(/(\d+)\s*×\s*(\d+)/);
        
        if (positionMatch && sizeMatch) {
            // 填充表单
            $('#regionId').val(regionId);
            $('#regionName').val(regionName);
            $('#regionX').val(positionMatch[1]);
            $('#regionY').val(positionMatch[2]);
            $('#regionWidth').val(sizeMatch[1]);
            $('#regionHeight').val(sizeMatch[2]);
            
            // 设置模态框状态
            $('#regionModalTitle').text('编辑定制区域');
            $('#regionSubmitText').text('保存修改');
            isEditMode = true;
            currentRegionId = regionId;
            
            // 显示模态框
            $('#regionModal').modal('show');
        }
    });

    // 删除区域按钮
    $('.delete-region').on('click', function(e) {
        e.preventDefault();
        const regionId = $(this).data('region-id');
        const regionName = $(this).data('region-name');
        
        APP_UTILS.confirm(`确定要删除区域"${regionName}"吗？此操作不可撤销。`, () => {
            APP_UTILS.showLoading('删除中...');
            
            APP_AJAX.post(`/regions/${regionId}/delete`)
                .then(response => {
                    APP_UTILS.hideLoading();
                    if (response.success) {
                        APP_UTILS.showSuccess('区域删除成功');
                        setTimeout(() => {
                            location.reload();
                        }, 1000);
                    } else {
                        APP_UTILS.showError(response.error || '删除失败');
                    }
                })
                .catch(error => {
                    APP_UTILS.hideLoading();
                    APP_UTILS.showError(error.error || '删除失败');
                });
        });
    });

    // 编辑底板按钮
    $('.edit-template').on('click', function(e) {
        e.preventDefault();
        $('#templateModal').modal('show');
    });

    // 编辑底板表单提交
    $('#templateForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = {
            name: $('#templateName').val().trim(),
            width: parseInt($('#templateWidth').val()),
            height: parseInt($('#templateHeight').val()),
            description: $('#templateDescription').val().trim()
        };

        APP_UTILS.showLoading('保存中...');

        APP_AJAX.post(`/templates/${templateData.id}/edit`, formData)
            .then(response => {
                APP_UTILS.hideLoading();
                if (response.success) {
                    APP_UTILS.showSuccess('底板更新成功');
                    $('#templateModal').modal('hide');
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    APP_UTILS.showError(response.error || '保存失败');
                }
            })
            .catch(error => {
                APP_UTILS.hideLoading();
                APP_UTILS.showError(error.error || '保存失败');
            });
    });

    // 区域模态框关闭时重置表单
    $('#regionModal').on('hidden.bs.modal', function() {
        $('#regionForm')[0].reset();
        $('#regionId').val('');
        $('#regionModalTitle').text('添加定制区域');
        $('#regionSubmitText').text('添加区域');
        isEditMode = false;
        currentRegionId = null;
    });

    // 区域坐标和尺寸输入验证
    $('#regionX, #regionY, #regionWidth, #regionHeight').on('input', function() {
        validateRegionBounds();
    });

    function validateRegionBounds() {
        const x = parseInt($('#regionX').val()) || 0;
        const y = parseInt($('#regionY').val()) || 0;
        const width = parseInt($('#regionWidth').val()) || 0;
        const height = parseInt($('#regionHeight').val()) || 0;
        
        const submitBtn = $('#regionForm button[type="submit"]');
        
        if (x + width > templateData.width || y + height > templateData.height) {
            submitBtn.prop('disabled', true);
            if (!$('.region-bounds-warning').length) {
                $('#regionForm .modal-body').append(
                    '<div class="alert alert-warning region-bounds-warning mt-2">' +
                    '<i class="bi bi-exclamation-triangle me-1"></i>' +
                    '区域超出底板范围' +
                    '</div>'
                );
            }
        } else {
            submitBtn.prop('disabled', false);
            $('.region-bounds-warning').remove();
        }
    }

    function renderTemplatePreview() {
        const canvas = $('#templatePreview');
        const canvasWidth = canvas.width();
        const maxCanvasHeight = 300;
        
        // 计算预览比例
        const scale = Math.min(canvasWidth / templateData.width, maxCanvasHeight / templateData.height);
        const previewWidth = templateData.width * scale;
        const previewHeight = templateData.height * scale;
        
        canvas.css({
            width: previewWidth + 'px',
            height: previewHeight + 'px'
        });
        
        // 清除现有区域
        canvas.find('.region-overlay').remove();
        
        // 渲染区域
        regionsData.forEach(region => {
            const regionElement = $(`
                <div class="region-overlay" title="${region.name}">
                    <div class="region-label">${region.name}</div>
                </div>
            `);
            
            regionElement.css({
                left: (region.x * scale) + 'px',
                top: (region.y * scale) + 'px',
                width: (region.width * scale) + 'px',
                height: (region.height * scale) + 'px'
            });
            
            canvas.append(regionElement);
        });
    }

    // 响应式调整
    $(window).on('resize', APP_UTILS.debounce(renderTemplatePreview, 300));
});

/**
 * 区域表格行悬停效果
 */
$(document).on('mouseenter', '#regionsTable tr[data-region-id]', function() {
    const regionId = $(this).data('region-id');
    $(`.region-overlay[title*="${regionId}"]`).addClass('highlight');
}).on('mouseleave', '#regionsTable tr[data-region-id]', function() {
    $('.region-overlay').removeClass('highlight');
});

// 添加高亮样式
const style = document.createElement('style');
style.textContent = `
    .region-overlay.highlight {
        background: rgba(255, 193, 7, 0.4) !important;
        border-color: #ffc107 !important;
        z-index: 10 !important;
    }
`;
document.head.appendChild(style);
